<template>
	<navBar title="待定"></navBar>
	<map class="map" :markers="markers" :polyline="polyLineList" :longitude="longitude" :latitude="latitude"></map>

	<!-- 美化后的标记点列表 -->
	<view class="markers-container">
		<view class="markers-list">
			<view v-for="(item, i) in markers" :key="i" class="marker-item">
				<button @click="goToLocation(item.id)" class="marker-btn" :style="{
						backgroundColor: theme.cardColor,
						color: theme.textColor,
						borderColor: theme.accentColor
					}">
					<view class="marker-icon">
						<up-icon name="map" size="28"></up-icon>
					</view>
					<view class="marker-info">
						<view class="marker-title">{{ item.title }}</view>
						<view class="marker-subtitle" :style="{ color: theme.subTextColor }">
							<text>{{ item.location }}</text>
							<text>{{ item.time }}</text>
						</view>
					</view>
					<view class="marker-arrow" :style="{ color: theme.accentColor }">
						<text class="icon">→</text>
					</view>
				</button>
			</view>
		</view>
	</view>
	
	<refreshButton></refreshButton>
	<tabBar></tabBar>
</template>

<script>
	import {
		themeColor
	} from '@/stores/themeColor'
	import {
		mapInfo
	} from '@/stores/mapInfo'

	export default {
		data() {
			return {
				isShow: true,

				longitude: 116,
				latitude: 39
			}
		},
		computed: {
			// 获取当前主题
			theme() {
				return themeColor().themes[themeColor().currentThemeIndex]
			},
			
			// 获取提醒过的数据
			markers() {
				const res = mapInfo().noticeInfo || []
				return res.map((item, index) => {
					return {
						id: index,
						latitude: item[2],
						longitude: item[3],
						title: item[1],
						location: item[0],
						time: item[4],
						label: {
							content: item[0]
						},
						width: 50,
						height: 25
					}
				})
			}
		},
		
		created() {
			mapInfo().getNoticeInfo()
		},
		
		methods: {
			goToLocation(id) {
				this.longitude = this.markers[id].longitude
				this.latitude = this.markers[id].latitude
			}
		}
	}
</script>

<style lang="scss">
	.map {
		width: 750rpx;
		height: 1000rpx;
	}

	// 标记点列表样式
	.markers-container {
		padding: 24rpx;
		background-color: white;
	}

	.markers-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.marker-item {
		width: 100%;
	}

	.marker-btn {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		border-radius: 16rpx;
		border-width: 1px;
		border-style: solid;
		text-align: left;
		transition: all 0.3s ease;
		overflow: hidden;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: currentColor;
			opacity: 0;
			transition: opacity 0.3s ease;
			z-index: -1;
		}

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

			&::after {
				opacity: 0.05;
			}
		}

		&:active {
			transform: translateY(0);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}
	}

	.marker-icon {
		margin: auto 12rpx;
	}

	.marker-info {
		flex-grow: 1;
		overflow: hidden;
		margin: auto 12rpx;
	}

	.marker-title {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 4rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.marker-subtitle {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		gap: 30rpx;
	}

	.marker-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin-left: 12rpx;
		transition: transform 0.3s ease;
	}

	.marker-btn:hover .marker-arrow {
		transform: translateX(8rpx);
	}
</style>